<template>
   <vxe-table :data="props.tableDate" border :tree-config="{childrenField: 'children'}" height="600">
     <vxe-column field="cat_name" title="分类名称" tree-node></vxe-column>
     <vxe-column field="cat_deleted" title="是否有效">
      <template v-slot="scope">
        <el-icon v-if="scope.row.cat_deleted === true" style="color: limegreen"><SuccessFilled/></el-icon>
        <el-icon v-else="scope.row.cat_deleted === false" style="color: red"><CircleCloseFilled/></el-icon>
      </template>
     </vxe-column>
     <vxe-column field="cat_level" title="排序">
      <template v-slot="scope">
        <el-tag v-if="scope.row.cat_level === 0" size='small'>一级</el-tag>
        <el-tag v-else-if="scope.row.cat_level === 1" size='small' type='success'>二级</el-tag>
        <el-tag v-else size='small' type='warning'>三级</el-tag>
      </template>
     </vxe-column>
     <vxe-column field="age" title="操作">
      <template #default="scope">
        <el-button size="small" color="#409eff" :icon="Edit" style="color: #fff" @click="edit(scope.row.cat_name, scope.row.cat_id)">编辑</el-button>
        <el-button size="small" color="#F56C6C" :icon="Delete" style="color: #fff" @click="deleteCategory(scope.row.cat_id)">删除</el-button>
      </template>
     </vxe-column>
   </vxe-table>
</template>

<script lang="ts" setup>
import { SuccessFilled, CircleCloseFilled, Edit, Delete } from '@element-plus/icons-vue'
import { DeleteCateogryFnc } from '@/api/category'

  const props = defineProps({
    tableDate: {type: Array, required: true},
    pageNow: {type: Number, required: true},
    pageSize: {type: Number, required: true}
  })
  const emit = defineEmits(['showDialog', 'setCatNameID', 'init'])

  const edit = (catName: string, id: number) => {
    emit('showDialog', true, 'edit')
    emit('setCatNameID', catName, id)
  }

  const deleteCategory = async (id: number) => {
    ElMessageBox.confirm('此操作将永久删除分类, 是否继续?', '提示',{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(async () => {
      const res = await DeleteCateogryFnc(id)
      if(res.data.meta.status === 200) {
        ElMessage({type: 'success', message: '删除成功', duration: 1000, onClose: () => {
          emit('init', props.pageNow, props.pageSize)
        }}) 
      }
    }).catch(() => {
      ElMessage({ type: 'info', message: '取消删除'})
    })
  }
</script>